<template>
  <div class="investment">
    <div>
      <van-nav-bar
        title="Investment Record"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="investment-content">
      <div class="card-list">
        <van-pull-refresh
          v-model="refreshing"
          loading-text="loading……"
          pulling-text="Drop down to refresh"
          loosing-text="Free to refresh"
          success-text="Refresh the success"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="No more"
            loading-text="loading……"
            @load="onLoad"
          >
            <div class="card-item" v-for="item in list" :key="item.id">
              <div class="card-top">
                <div class="card-lt">
                  <img :src="item.pet.image" alt="" srcset="" />
                </div>
                <div class="card-rt">
                  <h3>
                    {{ item.pet.name }}
                  </h3>
                  <p class="desc-num">
                    <span class="desc"
                      >Profit:{{ item.pet.profit | getmoney }} Rs/{{
                        item.pet.day
                      }}
                      Day</span
                    >
                    <span class="num">x{{ item.number }}</span>
                  </p>
                  <p class="unit">
                    Unit Price :{{ item.pet.buying_price | getmoney }} rs
                  </p>
                </div>
              </div>
              <div class="card-bottom">
                <div class="bottom-lt">
                  Total: <span>{{ item.amount | getmoney }} <i>rs</i> </span>
                </div>
                <div class="bottom-rt">
                  <div v-if="item.state == 1">
                    <button class="rtBtn2">Sold</button>
                  </div>
                  <div v-else>
                    <p v-if="item.can_sell == 0">
                      Revenue time:{{ item.var_daily + "/" + item.pet.day }}
                    </p>
                    <button
                      v-else
                      class="rtBtn"
                      @click.stop="
                        sell(item.id, item.can_sell, item.pet.next_pet_id)
                      "
                    >
                      Sold
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 0,
      refreshing: false,
      limit: 10,
      list: [],
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getPetOrders();
    },
    onRefresh() {
      this.finished = false;
      this.page = 0;
      this.loading = true;
      this.onLoad();
    },
    getPetOrders(is) {
      this.page++;
      this.$store
        .dispatch("petOrders", {
          type: 1,
          page: this.page,
          limit: this.limit,
        })
        .then((res) => {
          this.loading = false;
          if (res.length == 0) {
            this.finished = true;
          } else {
            res.forEach((element) => {
              this.list.push(element);
            });
          }
        });
    },
    sell(id, isell, nextPetId) {
      if (isell != 1) {
        return;
      }
      this.$store
        .dispatch("sellout", { pet_order_id: id, nextPetId })
        .then((res) => {
          this.list = [];
          this.onRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.investment-content {
  .card-list {
    padding: 16px 0 65px 0;
    .card-item {
      margin: 0 auto 19px auto;
      width: 345px;
      background: #fbfbfb;
      box-shadow: 0px 3px 12px rgba(103, 103, 103, 0.2);
      border-radius: 8px;
      box-sizing: border-box;
      padding: 10px 15px 10px 10px;
      .card-top {
        display: flex;
        align-items: center;
        .card-lt {
          img {
            width: 100px;
            height: 100px;
          }
        }
        .card-rt {
          flex: 1;
          margin: 0 0 0 10px;
          font-size: 15px;
          box-sizing: border-box;
          h3 {
            padding: 10px 0;
          }
          .desc-num {
            padding: 0 0 10px 0;
            display: flex;
            justify-content: space-between;
            .desc {
              color: #888888;
            }
          }
          .unit {
            padding: 0 0 15px 0;
            color: #888888;
          }
        }
      }
      .card-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        .bottom-lt {
          span {
            font-size: 20px;
            color: #ff4f02;
            i {
              font-size: 15px;
            }
          }
        }
        .bottom-rt {
          color: #888888;
        }
        .rtBtn2 {
          background-color: #a9a9a9;
        }
        .rtBtn {
          background-color: #4a67f5;
          box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
        }
        button {
          width: 80px;
          height: 30px;
          box-shadow: 0px 2px 10px rgba(174, 180, 197, 0.4);
          border-radius: 15px;
          color: #fff;
          font-size: 13px;
          border: none;
        }
      }
    }
  }
}
</style>